<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Select2</title>
<link rel="stylesheet" href="../../../s/select2/4.0.0/css/select2.css">
<script src="../../../s/jquery/1.11.1/jquery.js"></script>
<script src="../../../s/select2/4.0.0/js/select2.full.js"></script>
<script src="../../../s/vue/2.7.16/vue.min.js"></script>
<style>
html, body {
	font: 13px/18px sans-serif;
}

select {
	min-width: 300px;
}
</style>
</head>
<body>

	<div id="el"></div>

	<!-- using string template here to work around HTML <option> placement restriction -->
	<script type="text/x-template" id="demo-template">
      <div>
        <p>Selected: {{ selected }}</p>
        <select2 :options="options" v-model="selected">
          <option disabled value="0">Select one</option>
        </select2>
      </div>
    </script>

	<script type="text/x-template" id="select2-template">
      <select>
        <slot></slot>
      </select>
    </script>

	<script>
		Vue.component('select2', {
			props : [ 'options', 'value' ],
			template : '#select2-template',
			mounted : function() {
				var vm = this
				$(this.$el).val(this.value)
				// init select2
				.select2({
					data : this.options
				})
				// emit event on change.
				.on('change', function() {
					vm.$emit('input', this.value)
				})
			},
			watch : {
				value : function(value) {
					// update value
					$(this.$el).val(value).trigger('change')
				},
				options : function(options) {
					// update options
					$(this.$el).select2({
						data : options
					})
				}
			},
			destroyed : function() {
				$(this.$el).off().select2('destroy')
			}
		})
		var vm = new Vue({
			el : '#el',
			template : '#demo-template',
			data : {
				selected : 0,
				options : [ {
					id : 1,
					text : 'Hello'
				}, {
					id : 2,
					text : 'World'
				} ]
			}
		});
	</script>
</body>
</html>